reflow, repaint

❓질문

reflow와 repaint의 차이점에 대해서 설명해주세요.

💡 조사하기전 내가 알고 있던 내용

홈페이지 UI에 변동점이 있으면 flew(재 생성) , repaint(다시 그리기) 과정을 한 후 페이지를 다시 그리는 걸로 알고있습니다.

🏫 정리한 내용

reflow는 브라우저의 페이지 구조가 변경 됐을때 다시 계산하는 과정입니다.
Dom의 구조가 변경 되거나 Css 스타일이 변경될 경우
화면에 다시 어떻게 배치할때 부모 , 자식 요소에게 영향을 주기 때문에 비용이 많이드는 작업입니다.
브라우저 렌더링 파이프라인에 '레이아웃' 단계를 다시하는것 입니다

repaint는 요소외 모양이나 스타일이 변경될때 발생됩니다.
요소의 모양만 변경하면 되니 비용이 상대적으로 많이 들지 않는 작업입니다.
브라우저 렌더링 파이프라인에 '페인트' 단계를 다시하는것 입니다

최적화 방법
비용이 많은 reflow를 많이 일으키지 않게합니다.
-> width , height 값은 변동 x

Css Ani 최적화
-> transform , opacity는 repaint만 일어납니다.

will-Chagne를 사용합니다.
-> 대충 미리 바뀔꺼다~ 알려주는 속성입니다
(단 남발시에는 메모리가 많이 소모되는 부작용이 있습니다.)